<script setup lang="ts">
import {useRoute, useRouter} from "vue-router";
import CdlDescriptions from "@/components/descriptions";
import {ref, h} from "vue";
import { ElMessage, ElMessageBox } from "element-plus"
import type {DescriptionsTree} from "@/interfaces/components/Descriptions";
import type {Vehicle, Plugin, Extra} from "@/interfaces/views/vehicle/vehicle";
import {useGetVehicleInfoApi, useVehicleDel} from "@/api/vehicle/vehicle";
import constant from "@/utils/constant";
import CdlImage from "@/components/Image";

const router = useRouter()
const route = useRoute()
if(route.query.id) initData()

const basicDescriptionsTree: DescriptionsTree<Vehicle> = [
  {label: "车牌号码", prop: "licensePlate"},
  {label: "默认司机", prop: "driverName"},
  {label: "车架号", prop: "vin"},
  {label: "使用性质", prop: "nature", dict: "vehicle_nature"},
  {label: "车型", prop: "type"},
  {label: "车辆颜色", prop: "color"},
  {label: "发动机编号", prop: "engineNum"},
  {label: "车辆所有人", prop: "owner"},
  {label: "核定载质量", prop: "ratifiedLoad"},
  {label: "车辆能源类型", prop: "energyType", dict: "vehicle_type"},
  {label: "总质量", prop: "totalMass"},
  {label: "外廓尺寸", prop: "size"},
  {label: "行驶证号", prop: "travelLicenseNum"},
  {label: "参考油耗(L/100Km)", prop: "fuelConsumption"},
  {label: "行驶证档案编号", prop: "travelLicenseFileNum"},
  {label: "车辆道路运输许可证号", prop: "transportPermit"},
  {label: "备注信息"},
  {label: "创建人 / 创建时间", slot: (scope)=>{
      return h("span", scope.creator + "/" + scope.createTime)
    }},
  {label: "更新人 / 更新时间", slot: (scope)=>{
      return h("span", scope.updater + "/" + scope.updateTime)
    }},
]
const pluginDescriptionsTree: DescriptionsTree<Plugin> = [
  {label: "IMEI码", prop: "imei"},
]
const extraDescriptionsTree: DescriptionsTree<Extra> = [
  {label: "行驶证照片", prop: "travelLicenseImg", slot: (id) =>{
      return h(CdlImage, {
        previewSrcList: [constant.downloadUrl + id],
        src: constant.downloadUrl + id,
      })
    }},
  {label: "道路运输许可证照片", prop: "transportPermitImg", slot: (id) =>{
      return h(CdlImage, {
        previewSrcList: [constant.downloadUrl + id],
        src: constant.downloadUrl + id,
      })
    }},
  {label: "运营许可证照片", prop: "operatingLicenseImg", slot: (id) =>{
      return h(CdlImage, {
        previewSrcList: [constant.downloadUrl + id],
        src: constant.downloadUrl + id,
      })
    }},
  {label: "其他照片", prop: "otherImg"},
]

const basicData = ref({})
const pluginData = ref({
  imei: ""
})
const extraData = ref({})
/**
 * 初始化数据
 */
function initData(){
  useGetVehicleInfoApi(route.query.id as string | number).then((res: any) => {
    const {imei, travelLicenseImg, transportPermitImg, operatingLicenseImg, otherImg, ...rest} = res.data
    basicData.value = rest
    pluginData.value.imei = imei
    extraData.value = {
      "travelLicenseImg": travelLicenseImg,
      "transportPermitImg": transportPermitImg,
      "operatingLicenseImg": operatingLicenseImg,
      "otherImg": otherImg
    }
  })
}
/**
 * 回退页面
 */
function fallbackPage(){
  router.back()
}

/**
 * 跳转编辑页面
 */
function jumpVehicleUpdate(){
  router.push({
    path: "/vehicleManage/vList/createAndModifyVehicle",
    query: {
      id: route.query.id
    }
  })
}

/**
 * 删除
 */
function vehicleDel(){
  ElMessageBox.confirm('确定进行删除操作? 此操作将会永久移除所选的数据', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    useVehicleDel(route.query.id as string | number).then(() =>{
      ElMessage.success("删除成功！自动跳转上一页")
      router.back()
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消删除',
    })
  })
}
</script>

<template>
<el-card style="position: relative">
  <button class="back_btn" @click="fallbackPage"></button>
  <div class="main_control">
    <el-button type="success" @click="jumpVehicleUpdate" v-auth="'vehicle:vehicle:update'">编辑</el-button>
    <el-button type="info" v-auth="'vehicle:vehicle:statistics'">单车统计</el-button>
    <el-button type="danger" @click="vehicleDel" v-auth="'vehicle:vehicle:delete'">删除</el-button>
  </div>
  <h1 class="top_line">基础信息</h1>
  <el-divider></el-divider>
  <CdlDescriptions :model="basicData" :template-tree="basicDescriptionsTree"></CdlDescriptions>
  <h1>车载硬件信息</h1>
  <el-divider></el-divider>
  <CdlDescriptions :model="pluginData" :template-tree="pluginDescriptionsTree"></CdlDescriptions>
  <h1>附加信息</h1>
  <el-divider></el-divider>
  <CdlDescriptions :model="extraData" :template-tree="extraDescriptionsTree"></CdlDescriptions>
</el-card>
</template>
